<template>
  <div class="emotional-map-body personal-label-body">
    <div class="breadcrumb-content">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">运营</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">情绪体验地图</el-breadcrumb-item>
        <el-breadcrumb-item>个人标签管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="emotional-content personal-label">
      <div class="header-control-bar">
        <div class="header-control-row">
          <div class="header-control-row-detail personal-header-control">
            <div class="header-control-detail-search-bar">
              <div class="header-control-detail-item">
                <el-input v-model="phone" placeholder="输入您要查询的手机号码" style="width: 230px"></el-input>
              </div>
              <div class="header-control-detail-item">
                <el-button type="primary">搜索</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="personal-label-wrap">
        <div class="personal-label-wrap-item">
          <div class="avatar" style="margin-left: 10%;">
            <el-avatar
              size="large"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-avatar>
          </div>
          <div class="user-info">
            <span>13323456789</span>
            <span>张三</span>
            <span>昆明</span>
            <span>网龄：3年</span>
            <span>套餐：全球通88元</span>
           <span style="flex: 100%;display: flex;place-items: center;">
             <el-tag size="small">集团</el-tag>
             <el-tag size="small">5G</el-tag>
             <el-tag size="small">家庭</el-tag>
           </span>
          </div>
		  <el-divider direction="vertical"></el-divider>
        </div>
        <div class="personal-label-wrap-item">
          <div class="icon">
            <i class="el-icon-star-on"></i>
          </div>
          <div class="attitude-info">
            <span>满意度：79分</span>
            <span>低满/潜在不满/满意度</span>
            <span>高/中/低风险</span>
          </div>
        </div>
        <div class="personal-label-wrap-item">
		   <el-divider direction="vertical"></el-divider>
          <div class="icon">
            <i class="el-icon-s-order"></i>
          </div>
          <div class="attitude-info">
            <div class="label-number">
              <span>标签量：78个</span>
              <span>不满：12个</span>
            </div>
            <div class="satisfy-button-item">
              <el-tag>资费不满</el-tag>
              <el-tag>网络不满</el-tag>
              <el-tag>产品不满</el-tag>
              <el-tag>服务不满</el-tag>
            </div>
          </div>
        </div>
      </div>
      <el-divider style="margin: 50px 0;"></el-divider>
      <div class="personal-label-view">
        <el-tabs tab-position="left">
          <el-tab-pane label="基础标签">
            <div class="personal-label-view-title" slot="label">
              <p>基础标签</p>
              <span>总量：17个&nbsp;&nbsp;&nbsp;&nbsp;不满0个</span>
            </div>
            <div class="personal-label-view-wrap">
              <div class="personal-label-view-wrap-item">
                <div class="personal-label-view-wrap-item-title">
                  <p class="title-icon"></p>
                  <span>正向标签视图</span>
                </div>
                <div class="personal-label-view-wrap-item-info">
                  <div class="label-view-info-item" v-for="(item, index) in labelViewList" :key="index">
                    <el-tag type="info">{{ index + 1 }}</el-tag>
                    <p>{{ item.info }}</p>
                  </div>
                </div>
              </div>
              <div class="personal-label-view-wrap-item">
                <div class="personal-label-view-wrap-item-title">
                  <p class="title-icon"></p>
                  <span>不满标签视图</span>
                </div>
                <div class="personal-label-view-wrap-item-info">
                  <div class="label-view-info-item" v-for="(item, index) in labelViewList" :key="index">
                    <el-tag type="info">{{ index + 1 }}</el-tag>
                    <p>{{ item.info }}</p>
                  </div>
                </div>
              </div>
              <div class="personal-label-view-wrap-item">
                <div class="personal-label-view-wrap-item-title">
                  <p class="title-icon"></p>
                  <span>标签与指标关联</span>
                </div>
                <div class="personal-label-view-wrap-item-info"></div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="调研标签">
            <div class="personal-label-view-title" slot="label">
              <p>调研标签</p>
              <span>总量：17个&nbsp;&nbsp;&nbsp;&nbsp;不满0个</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="投诉标签">
            <div class="personal-label-view-title" slot="label">
              <p>投诉标签</p>
              <span>总量：17个&nbsp;&nbsp;&nbsp;&nbsp;不满0个</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="业务标签">
            <div class="personal-label-view-title" slot="label">
              <p>业务标签</p>
              <span>总量：17个&nbsp;&nbsp;&nbsp;&nbsp;不满0个</span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="质量标签">
            <div class="personal-label-view-title" slot="label">
              <p>质量标签</p>
              <span>总量：17个&nbsp;&nbsp;&nbsp;&nbsp;不满0个</span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="satisfy-wrap">
        <div class="satisfy-wrap-view">
          <div class="result">
            <span>XXX满意度</span>
          </div>
          <div class="satisfy-wrap-view-item">
            <div class="satisfy-wrap-view-item-box" v-for="(item, index) in labelList" :key="index">
              <div class="label-tag">
                <span>{{ item.top }}：{{ item.name }}</span>
              </div>
              <p>关怀记录：{{ item.record }}次</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class PersonalLabel extends Vue {
  phone = '';
  labelViewList = [
    {
      info: '测试测试测试'
    },
    {
      info: '测试测试测试'
    },
    {
      info: '测试测试测试'
    },
    {
      info: '测试测试测试'
    },
    {
      info: '测试测试测试'
    }
  ];

  labelList = [
    {
      top: 'TOP1',
      name: '不满标签1',
      record: 1
    },
    {
      top: 'TOP2',
      name: '不满标签1',
      record: 1
    },
    {
      top: 'TOP3',
      name: '不满标签1',
      record: 1
    },
    {
      top: 'TOP4',
      name: '不满标签1',
      record: 1
    },
    {
      top: 'TOP5',
      name: '不满标签1',
      record: 1
    }
  ];
}
</script>

<style scoped></style>
